<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="static/css/bootstrap.min.css">

  <title>OpenNav</title>

  <style type="text/css">
    /* 分组样式 */
    .group {
      height: 3rem;
      padding: 1rem;
      border-bottom-style: dashed;
      border-bottom-width: thin;
      border-bottom-color: darkgrey;
      margin-bottom: 1rem;
    }
  </style>

</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-dark bg-dark">
      <!-- Navbar content -->
      <a class="navbar-brand" href="#">OpenNav</a>
      <form class="d-flex">
        <!-- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> -->
        <!-- <button class="btn btn-outline-success" type="submit">Search</button>
        <button class="btn btn-outline-success" type="submit">Search</button> -->
        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#add-link-modal">
          添加链接
        </button>

        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#add-group-modal">
          添加分组
        </button>
      </form>
    </nav>

    {% for group in groups %}
    <div class="group">
      <h5>{{group.title}}</h5>
      <!-- <span>{{group.title}}</span> -->
    </div>
    <div class="row">
      {% for link in group.links %}
      <div class="col-2">
        <a href="{{link.url}}" target="_blank" title="{{link.desc}}">
          <div class="card border-info" style="width: 18rem;">
            <div class="card-header">{{link.title}}</div>
            <div class="card-body">
              <!-- <h5 class="card-title">{{link.title}}</h5> -->
              <p class="card-text text-truncate">{{link.desc}}</p>
            </div>
          </div>
        </a>
      </div>

      <!-- <div class="col-2">
        <a href="{{link.url}}" target="_blank" title="{{link.desc}}">{{link.title}}</a>
      </div> -->
      {% endfor %}
    </div>
    {% endfor %}
  </div>

  <!-- add group Modal -->
  <div class="modal fade" id="add-group-modal" tabindex="-1" aria-labelledby="add-group-modal-label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title" id="add-group-modal-label">添加分组</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="add-group-form">
            <div class="form-group">
              <label for="add-group-title">标题：</label>
              <input type="text" name="title" class="form-control" id="add-group-title" placeholder="请输入标题">
            </div>
            <input type="hidden" name="uid" value="{{user.id}}" id="add-group-uid" />

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="addGroupButton">添加</button>
        </div>
      </div>
    </div>
  </div>

  <!-- add link Modal -->
  <div class="modal fade" id="add-link-modal" tabindex="-1" aria-labelledby="add-link-modal-label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title" id="add-link-modal-label">添加链接</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="add-link-form">
            <div class="form-group">
              <label for="add-link-group">分组：</label>
              <select class="form-control" id="add-link-group" name="gid">
                {% for group in groups %}
                <option value="{{group.id}}">{{group.title}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group">
              <label for="add-link-title">标题：</label>
              <input type="text" name="title" class="form-control" id="add-link-title" placeholder="请输入标题">
            </div>
            <div class="form-group">
              <label for="add-link-url">链接：</label>
              <input type="url" name="url" class="form-control" id="add-link-url" placeholder="请输入链接">
            </div>
            <div class="form-group">
              <label for="add-link-desc">描述：</label>
              <input type="text" name="desc" class="form-control" id="add-link-desc" placeholder="请输入描述信息">
            </div>
            <input type="hidden" name="uid" value="{{user.id}}" id="add-link-uid" />

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="addLinkButton">添加</button>
        </div>
      </div>
    </div>
  </div>


  <!-- jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="static/js/jquery-3.5.1.min.js"></script>
  <script src="static/js/bootstrap.bundle.min.js"></script>

  <script type="text/javascript">
    $(function ($) {
      // 注册添加链接按钮事件
      $("#addLinkButton").click(function () {
        $.post("/link/add", {
          "title": $("#add-link-title").val(),
          "url": $("#add-link-url").val(),
          "desc": $("#add-link-desc").val(),
          "uid": $("#add-link-uid").val(),
          "gid": $("#add-link-group").val()
        }, function (result) {
          alert('result：' + result);
          window.location.replace("/")
        });
      });

      $("#addGroupButton").click(function () {
        $.post("/group/add", {
          "title": $("#add-group-title").val(),
          "uid": $("#add-group-uid").val()
        }, function (result) {
          alert('result：' + result);
          window.location.replace("/")
        });
      });


    });
  </script>

</body>

</html>